<template>
   <div class="container">
      <div class="sidebar" :class="{ collapsed: isCollapse }" :style="{ width: leftWidth }">
         <a href="/" class="top">
            <img src="https://cgj-1309034514.cos.ap-chengdu.myqcloud.com/202410/67107e3adc80e.png" class="top__logo" />
            <transition name="el-zoom-in-top">
               <span v-show="!isCollapse">进销存管理系统</span>
            </transition>
         </a>
         <el-menu :unique-opened="true" active-text-color="#6860FF" :collapse="isCollapse" background-color="#F5F8FD"
            class="el-menu-vertical-demo" text-color="#000" :router="true" :default-active="route.path">
            <SubMenu :menuData="menuData"></SubMenu>
         </el-menu>
      </div>
   </div>
</template>

<script setup>
import SubMenu from "./SubMenu.vue";
import { useRouterStore } from "@/stores";
const ruterStore = useRouterStore();
const route = useRoute();
const props = defineProps({
   isCollapse: {
      type: Boolean,
      default: false,
   },
});
const leftWidth = computed(() => ruterStore.leftWidth);
const menuData = ref(ruterStore.children || []);
watchEffect(() => {
   menuData.value = ruterStore.children;
});
</script>

<style scoped lang="scss">
::v-deep .el-menu-item:hover{
   color: #6860FF;
   background-color: transparent;

}
::v-deep .el-menu-item{
  

   border-bottom: 1px solid #4c4a4a19;
}
::v-deep .el-sub-menu{
  

   border-bottom: 1px solid #4c4a4a19;
}

::v-deep .el-menu{
   // padding-top: 20px;
   padding-left: 4px;
}
::v-deep .el-sub-menu__title:hover{
   color: #6860FF;
   background-color: transparent;
}

::v-deep .el-menu-item.is-active {
 
 background-color: #6860ff21;
 border-right:3px solid #6860ff;
 border-radius: 10px 0 0 10px ;
}


.container {
   display: flex;
   height: 100vh; // 确保容器高度占满整个视口
   flex-direction: row;
}

.sidebar {
   width: 170px; // 侧边栏宽度
   position: fixed; // 固定位置
   overflow: hidden;
   top: 0;
   left: 0;
   bottom: 0;
   background-color: #F5F8FD;
   transition: width 0.2s ease; // 平滑过渡效果

   &.collapsed {
      width: 64px; // 收缩后的宽度
   }

   .top {
      white-space: nowrap;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      color: #161616;
      text-decoration: none;
      font-weight: 600;
      font-family: "黑体";
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(230, 231, 238);
      margin-bottom: 20px;
      &__logo {
         width: 30px;
         height: 30px;
         margin-right: 10px;
      }
   }

   .el-menu {
      border-right: none;
      height: calc(100% - 60px); // 减去顶部的高度
      overflow-y: auto; // 使菜单可滚动
   }
}

.content {
   flex: 1; // 主内容区域占据剩余空间
   padding: 20px;
   margin-left: 250px; // 与侧边栏宽度相同
   transition: margin-left 0.3s ease; // 平滑过渡效果

   @media (max-width: 768px) {
      margin-left: 64px; // 移动设备上适应收缩后的侧边栏
   }
}
</style>
